<template>
	<view class="contain">
		<view style="padding-top: 300rpx" v-if="!list.length">
			<u-empty width="250" mode="data" text="暂无消息" />
		</view>
		<template v-else>
			<view class="list bg-fff" v-for="item in list" :key="item.id">
				<view class="flex-align">
					<text class="msg-tlt" style="margin-right: 10rpx">{{ item.title }}</text>
					<u-badge :isDot="true" bgColor="#e60012" v-if="item.isRead !== '1'"></u-badge>
				</view>
				<view class="time">{{ item.addTime }}</view>
				<view class="msg-content"> {{ item.conent }}</view>
			</view>
			<u-loadmore
				line
				marginTop="16"
				fontSize="13"
				:status="status"
				loading-text="努力加载中~"
				loadmore-text="上拉加载更多~"
			/>
		</template>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			title: 'Hello',
			list: [],
			pages: 1,
			status: 'loadmore'
		}
	},
	async onLoad() {
		this.pages = 1
		this.list = []
		this.getMessageList()
	},
	methods: {
		getMessageList() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			/* prettier-ignore */
			this.$https(true, 'get', {
				url: '/member/message/list/'+this.pages,
				data: { }
			},(res) => {
				this.list = this.list.concat(res.data)
				this.status = res.data.length < 10 ? 'nomore' : 'loadmore'
			})
			/* prettier-ignore */
		},
		onReachBottom() {
			if (this.status !== 'nomore') {
				this.status = 'loading '
				this.pages++
				this.getMessageList()
			}
		}
	}
}
</script>

<style scoped>
.contain {
	padding: 0 16rpx;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.list {
	padding: 24rpx 32rpx;
	margin-bottom: 20rpx;
}
.msg-tlt {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}
.time {
	color: #999;
	font-size: 26rpx;
	margin: 16rpx 0 0;
}
.msg-content {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 24rpx;
	color: #666;
}
</style>
